<!doctype html>
<html lang="en">
<head>

<?php include './inc/css.html'; ?>

<style type="text/css">

    .wrap{
        padding:.55rem 0;
    }
    .courseheader{
        line-height: .5rem;
        position: fixed;
        width:100%;
        top:0px;
        z-index: 2;
    }
    .courseheader li{
        border-bottom:3px solid transparent;
    }

    .toggleclass{
        right:.1rem;
        top:.7rem;
        font-size: 130%;
    }
</style>

</head>
<body>
<div class="floaticon dn _text_barely tran3 toggleclass ion-android-menu"></div>

<div class="courseheader fixed fixedshadow _bg_white">
      <ul class="flex-list around">
        <li class="f-item tc  <?php if($_GET['t']==1 ) echo ' _border_dark'; ?>">
            <a  class=" <?php if($_GET['t']==1 ) echo ' _active_primary'; ?>" href="./course.php?t=1">
                <span class="ion-ios-albums-outline"> 全部课程</span>
            </a>
        </li>
        <li class="f-item tc <?php if($_GET['t']==2 ) echo ' _border_dark'; ?>">
            <a  class="<?php if($_GET['t']==2 ) echo ' _active_primary'; ?>" href="./course.php?t=2">
                <span class="ion-thumbsup"> 推荐课程</span>
            </a>
        </li>
        <li class="f-item tc <?php if($_GET['t']==3 ) echo ' _border_dark'; ?>">
            <a  class="<?php if($_GET['t']==3 ) echo ' _active_primary'; ?>" href="./course.php?t=3">
                <span class="ion-ios-time-outline"> 最新课程</span>
            </a>
        </li>    
       </ul>
</div>
<div class="wrap animated fadeIn">
<!-- data-url="填写分页加载的链接参数为p"  -->
<ul id="list" data-url="/course" class="list clearfix commonlist">
<?php include './inc/courselist.html'; ?>
</ul>
<!-- End 课程-->


<!--底部-->
<div class="listbottom tc op6 dn">我是有底线的~</div>
 
</div>   

<?php include './inc/nav.html'; ?>
</body>

<?php include './inc/js.html'; ?>
<script type="text/javascript">
$(document).ready(function(){
  // 初始化轮播图
  var bannerSwiper = new Swiper ('#banner', {
        autoplay:5000,
        effect : 'fade',
        fade: {
          crossFade: false,
        },
        autoplayDisableOnInteraction:false,
        on:{
          init: function(){
            swiperAnimateCache(this); //隐藏动画元素 
            swiperAnimate(this); //初始化完成开始动画
          }, 
          slideChangeTransitionEnd: function(){ 
            swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
          } 
        }
        // scrollbar: '.swiper-scrollbar'
    } ) ;
    // new WOW().init();
    // 
    $('.toggleclass').on('click',function(){
        var that = $(this);
        var list = $('#list');
        if(that.hasClass('ion-android-menu')){
            that.removeClass('ion-android-menu').addClass('ion-android-apps');
            list.addClass('imglist');

        }else{

            that.removeClass('ion-android-apps').addClass('ion-android-menu');
            list.removeClass('imglist');
        }


    })

})

</script>

<script type="text/javascript">


$(function(){






})
</script>
</html>